<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width="600" height="400"></canvas>
<script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');

    // Style
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 1.5;
    ctx.font = 'italic 18px "Times New Roman"';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // Parameters
    const cx = 280;
    const cy = 200;
    const l = 320;
    const phi = Math.PI / 15; // Angle of the rod
    const r_val = l * 0.4;   // Position of the beetle on the rod

    const cosPhi = Math.cos(phi);
    const sinPhi = Math.sin(phi);

    // Helper function for drawing arrows
    function drawArrow(fromX, fromY, toX, toY, headLength = 8) {
        const dx = toX - fromX;
        const dy = toY - fromY;
        const angle = Math.atan2(dy, dx);
        ctx.beginPath();
        ctx.moveTo(fromX, fromY);
        ctx.lineTo(toX, toY);
        ctx.moveTo(toX, toY);
        ctx.lineTo(toX - headLength * Math.cos(angle - Math.PI / 6), toY - headLength * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(toX, toY);
        ctx.lineTo(toX - headLength * Math.cos(angle + Math.PI / 6), toY - headLength * Math.sin(angle + Math.PI / 6));
        ctx.stroke();
    }
    
    // 1. Draw horizontal reference line (dashed)
    ctx.save();
    ctx.lineWidth = 1;
    ctx.setLineDash([6, 4]);
    const horiz_start_x = cx - l / 2 - 40;
    const horiz_end_x = cx + l / 2 + 40;
    ctx.beginPath();
    ctx.moveTo(horiz_start_x, cy);
    ctx.lineTo(horiz_end_x, cy);
    ctx.stroke();
    // Add bracket at the left end
    ctx.setLineDash([]);
    ctx.lineWidth = 1.5;
    ctx.beginPath();
    ctx.moveTo(horiz_start_x + 5, cy - 10);
    ctx.lineTo(horiz_start_x, cy - 10);
    ctx.lineTo(horiz_start_x, cy + 10);
    ctx.lineTo(horiz_start_x + 5, cy + 10);
    ctx.stroke();
    ctx.restore();

    // 2. Draw the tilted rod
    ctx.save();
    ctx.lineWidth = 2.5;
    const rod_x1 = cx - (l / 2) * cosPhi;
    const rod_y1 = cy + (l / 2) * sinPhi;
    const rod_x2 = cx + (l / 2) * cosPhi;
    const rod_y2 = cy - (l / 2) * sinPhi;
    ctx.beginPath();
    ctx.moveTo(rod_x1, rod_y1);
    ctx.lineTo(rod_x2, rod_y2);
    ctx.stroke();
    ctx.fillText('m', rod_x1 - 25, rod_y1);
    ctx.restore();

    // 3. Draw the pivot O
    ctx.beginPath();
    ctx.arc(cx, cy, 4, 0, 2 * Math.PI);
    ctx.fill();
    ctx.fillText('O', cx - 20, cy - 5);
    
    // 4. Draw the falling beetle and its path
    const beetle_fall_x = cx + l / 4;
    const beetle_start_y = cy - 100;
    // Beetle body
    ctx.beginPath();
    ctx.arc(beetle_fall_x, beetle_start_y, 3.5, 0, 2 * Math.PI);
    ctx.fill();
    ctx.fillText('m', beetle_fall_x - 25, beetle_start_y + 5);
    // Dashed path
    ctx.save();
    ctx.lineWidth = 1;
    ctx.setLineDash([4, 2]);
    ctx.beginPath();
    ctx.moveTo(beetle_fall_x, beetle_start_y);
    ctx.lineTo(beetle_fall_x, cy);
    ctx.stroke();
    ctx.restore();
    // Velocity vector v0
    ctx.save();
    ctx.lineWidth = 2;
    drawArrow(beetle_fall_x, beetle_start_y + 10, beetle_fall_x, beetle_start_y + 50);
    ctx.font = 'italic 18px "Times New Roman"';
    ctx.fillText('v', beetle_fall_x + 12, beetle_start_y + 30);
    ctx.font = 'italic 14px "Times New Roman"';
    ctx.fillText('0', beetle_fall_x + 20, beetle_start_y + 35);
    ctx.restore();
    
    // 5. Draw the beetle on the rod
    const beetle_on_rod_x = cx + r_val * cosPhi;
    const beetle_on_rod_y = cy - r_val * sinPhi;
    ctx.beginPath();
    ctx.arc(beetle_on_rod_x, beetle_on_rod_y, 3.5, 0, 2 * Math.PI);
    ctx.fill();

    // 6. Draw angle phi
    ctx.save();
    ctx.lineWidth = 1;
    ctx.beginPath();
    ctx.arc(cx, cy, 50, 0, -phi, true);
    ctx.stroke();
    ctx.fillText('φ', cx + 58, cy - 20);
    ctx.restore();

    // 7. Draw dimension r
    const dim_offset = 20;
    const tick_len = 5;
    const perp_vec_x = sinPhi;
    const perp_vec_y = cosPhi;
    ctx.save();
    ctx.lineWidth = 1;
    // Ticks
    ctx.beginPath();
    ctx.moveTo(cx - tick_len * perp_vec_x, cy - tick_len * perp_vec_y);
    ctx.lineTo(cx + tick_len * perp_vec_x, cy + tick_len * perp_vec_y);
    ctx.moveTo(beetle_on_rod_x - tick_len * perp_vec_x, beetle_on_rod_y - tick_len * perp_vec_y);
    ctx.lineTo(beetle_on_rod_x + tick_len * perp_vec_x, beetle_on_rod_y + tick_len * perp_vec_y);
    // Dimension line
    const dim_line_x1 = cx + dim_offset * perp_vec_x;
    const dim_line_y1 = cy + dim_offset * perp_vec_y;
    const dim_line_x2 = beetle_on_rod_x + dim_offset * perp_vec_x;
    const dim_line_y2 = beetle_on_rod_y + dim_offset * perp_vec_y;
    ctx.moveTo(dim_line_x1, dim_line_y1);
    ctx.lineTo(dim_line_x2, dim_line_y2);
    ctx.stroke();
    // Label r
    const label_r_x = (dim_line_x1 + dim_line_x2) / 2;
    const label_r_y = (dim_line_y1 + dim_line_y2) / 2;
    ctx.fillText('r', label_r_x - 15, label_r_y + 8);
    ctx.restore();

    // 8. Draw dimension l/4
    const dim_y = cy + 45;
    const x_l4 = cx + l / 4;
    ctx.save();
    ctx.lineWidth = 1;
    // Vertical line
    ctx.beginPath();
    ctx.moveTo(x_l4, cy);
    ctx.lineTo(x_l4, dim_y);
    ctx.stroke();
    // Horizontal line with arrow
    drawArrow(x_l4, dim_y, cx, dim_y);
    // Label l/4
    const frac_x = cx + l / 4 - 30;
    const frac_y_center = dim_y - 12;
    ctx.font = 'italic 16px "Times New Roman"';
    ctx.fillText('l', frac_x, frac_y_center - 8);
    ctx.beginPath();
    ctx.moveTo(frac_x - 8, frac_y_center);
    ctx.lineTo(frac_x + 8, frac_y_center);
    ctx.stroke();
    ctx.fillText('4', frac_x, frac_y_center + 8);
    ctx.restore();

    // 9. Draw caption
    ctx.save();
    ctx.font = '20px SimHei';
    ctx.fillStyle = 'black';
    ctx.fillText('力图 6.5.1', cx + 20, canvas.height - 30);
    ctx.restore();

</script>
</body>
</html>